// 这个main.js是我们项目的js入口文件

// 导入jQuery，下面的import含义为从node_modules下导入jQuery包并用$这个变量来接收
// import *** from *** 是ES6中导入模块的方式
import $ from 'jquery'

// webpack默认只能打包处理JS类型的文件，无法处理其他非JS类型的文件，如果要处理非
// JS类型的文件，我们需要手动安装一些合适的第三方loader加载器
// 1、如果想要打包处理CSS文件，需要安装npm i style-loader css-loader -D
// 2、打开webpack.config.js这个配置文件，在里面新增一个配置节点module，这是一个对
//    象。在module对象身上，有个rules属性，这个rules属性是个数组，在这个数组中存放
//    了所有第三方文件的匹配和处理规则。
import './css/index.css'
import 'bootstrap/dist/css/bootstrap.min.css'
import 'bootstrap/dist/js/bootstrap.min'


$(function() {
    $('li:odd').css('backgroundColor', 'blue');
    $('li:even').css('backgroundColor', function() {
        return '#' + 'D97634'
    });
});


// webpack能做什么事？
// 1、webpack能够处理js文件的相互依赖关系
// 2、webpack能够处理js的兼容问题，能把高级的浏览器不识别的语法转为低级的，浏览器能正常识别的语法。


// 使用 webpack-dev-server这个工具来实现自动打包编译的功能
// 1、运行npm i webpack-dev-server -D 把这个工具安装到项目的本地开发依赖
// 2、这个工具的用法和webpack命令的用法完全是一样的。
// 3、由于我们是在项目中本地安装的webpack-dev-server，所以无法把它当作我们的脚本命令在powershell终端中直接运行。
// 4、webpack-dev-server帮我们打包生成的bundle.js文件并没有存放到实际的物理磁盘上；而实直接托管到了电脑的内存中。